<div class="groupReport-Processing">

    <div class="groupReport-Processing-top">
        <div *ngIf="!ChartsHide" echarts [options]="options" id="ReportProList" style="width:133px;height:133px;margin: 48px auto 40px auto;"></div>
        <div class="ChartsHide" *ngIf="ChartsHide"></div>
        <div class="timeChoose">
            <input [ngClass]="{ 'slide-up': TimeBoolean[0] }" type="text" readonly="readonly" [(ngModel)]="timeOver[0]" (click)="ListShow(0)">
            <ul class="Day0">
                <li [ngClass]="{ 'active': i === ItemIndex[0] }" *ngFor="let x of TimeItem, let i = index" (click)="ItemTimeSelect(0,i)">{{ x }}</li>
            </ul>
        </div>
        <div class="groupReport-list">
            <div>
                <span>及时响应率</span>
                <p>{{ Res || 0 }}<em>%</em></p>
            </div>
            <div>
                <span>及时恢复率</span>
                <p>{{ Rec || 0 }}<em>%</em></p>
            </div>
        </div>
    </div>

    <div class="groupReport-line"></div>

    <div class="groupReport-Processing-bottom">
        <div>
            <div>
                <h3>及时响应率</h3>
                <div class="timeChoose">
                    <input [ngClass]="{ 'slide-up': TimeBoolean[1] }" type="text" readonly="readonly" [(ngModel)]="timeOver[1]" (click)="ListShow(1)">
                    <ul class="Day1">
                        <li [ngClass]="{ 'active': i === ItemIndex[1] }" *ngFor="let x of TimeItem, let i = index" (click)="ItemTimeSelect(1,i)">{{ x }}</li>
                    </ul>
                </div>
            </div>
            <div>
                <ul>
                    <li>
                        <label for=""><img src="assets/imgs/gallery/SVG/17188.svg" alt="">TOP3</label>
                        <ul>
                            <li *ngFor="let data of AlarmDealRes.asc"><i>{{ type === 1 ? data.projectName : data.alarmTypeName }}</i><i>{{ data.rate }}<em>%</em></i></li>
                        </ul>
                    </li>
                    <li>
                        <label for=""><img src="assets/imgs/gallery/SVG/17189.svg" alt="">TOP3</label>
                        <ul>
                            <li *ngFor="let data of AlarmDealRes.desc"><i>{{ type === 1 ? data.projectName : data.alarmTypeName }}</i><i>{{ data.rate }}<em>%</em></i></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="groupReport-line"></div>

        <div>
            <div>
                <h3>及时恢复率</h3>
                <div class="timeChoose">
                    <input [ngClass]="{ 'slide-up': TimeBoolean[2] }" type="text" readonly="readonly" [(ngModel)]="timeOver[2]" (click)="ListShow(2)">
                    <ul class="Day2">
                        <li [ngClass]="{ 'active': i === ItemIndex[2] }" *ngFor="let x of TimeItem, let i = index" (click)="ItemTimeSelect(2,i)">{{ x }}</li>
                    </ul>
                </div>
            </div>
            <div>
                <ul>
                    <li>
                        <label for=""><img src="assets/imgs/gallery/SVG/17188.svg" alt="">TOP3</label>
                        <ul>
                            <li *ngFor="let data of AlarmDealRec.asc"><i>{{ type === 1 ? data.projectName : data.alarmTypeName }}</i><i>{{ data.rate }}<em>%</em></i></li>
                        </ul>
                    </li>
                    <li>
                        <label for=""><img src="assets/imgs/gallery/SVG/17189.svg" alt="">TOP3</label>
                        <ul>
                            <li *ngFor="let data of AlarmDealRec.desc"><i>{{ type === 1 ? data.projectName : data.alarmTypeName }}</i><i>{{ data.rate }}<em>%</em></i></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>